<template>
  <div style="border: 1px solid blue">
    <h1>this is header component</h1>
    <h1>以下是来自父组件的内容</h1>
    <div v-if="content">
      <div>title:{{ content.title }}</div>
      <div>content:{{ content.content }}</div>
    </div>
    <br />
    用户名：<input type="text" v-model="username" />
    <button @click="submitMsg">提交到父组件</button>
  </div>
  <br />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username: "",
    };
  },
  props: ["content"],
  methods: {
    submitMsg() {
      // 触发自定义事件
      // $emit(事件名，待传的值)
      this.$emit("sendToParent", this.username);
    },
  },
  computed: {},
  watch: {},
  beforeCreate() {
    console.log("beforeCreate数据初始化之前");
  },
  created() {
    console.log("created数据初始化之后");
  },
  beforeMount() {
    console.log("beforeMount挂载渲染前");
  },
  mounted() {
    console.log("mounted挂载渲染之后");
  },
  beforeUpdate() {
    console.log("beforeUpdate更新之前");
  },
  updated() {
    console.log("updated更新之后");
  },
  // vue3取消了
  // beforeDestroy() {
  //   console.log("beforeDestroy销毁前");
  // },
  // destroyed() {
  //   console.log("destroyed销毁后");
  // },
  // vue3新表达
  beforeUnmount() {
    console.log("beforeUnmount销毁前");
  },
  unmounted() {
    console.log("unmounted销毁后");
  },
};
</script>

<style scoped>
</style>
